<template>
<div class=" container".
<div class =" left" >
<!--书籍分类组件 -->
<CategoryCom @ category="categoryHandler" />
</div>
<div class=" right" >
<!--书籍列表组件 -->
<listCom :books=" list"/>
</div>
</div>
</template>
<script>
import CategoryCom from "./components/CategoryCom. vue";
import ListCom from " . /eomponents/ListCom. vue";
export default{
    date(){
        return{
            books:[
                {
                    id:"b001",
                    cid:1,
                    name:"<<鲁迅全集>>",
                },
                {
                  id:"b002",
                    cid:2,
                    name:"<<埃及神话>>",  
                },
                  {
                  id:"b003",
                    cid:3,
                    name:"<<经济学的轨迹>>",  
                },
                  {
                  id:"b004",
                    cid:4,
                    name:"<<大神话西游>>",  
                },
                  {
                  id:"b005",
                    cid:5,
                    name:"<<敦煌艺术>>",  
                },
            ],
            list"[]
        };
    },
    mounted(){
        this.list=this.books.slice();
    },
    components:{
        CategoryCom,
        ListCom,
    },
    methods:{
        categoryHandler(cid){
            //根据分类id筛选出对应分类的书籍
            this. list=this. books.filter(book=>book.cid===cid);
        }
    }
};
</script>
<style>
.container{
    overflow:hidden;
    width:600px
}
.container.left,
.container.right{
    float:left;
    margin-bottom:-10000px;
    padding-bottom : 10000px;
}
.container.left{
    width:20%;
    background:rgb(237,228,229);
}
.container.right{
   align-content:left;
   width:80%;
   background:rgb(205,222,245);
}
</style>